<template>
  <div>
    <bpmn-modeler
      ref="refNode"
      :xml="xml"
      :users="users"
      :groups="groups"
      :categorys="categorys"
      :exps="exps"
      :is-view="false"
      @save="save"
      @showXML="showXML"
    />
    <!--在线查看xml-->
    <el-drawer :title="xmlTitle"  v-model="xmlOpen" size="50%" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <el-button type="text" icon="DocumentCopy" style="display: contents;" @click="copyText">复制</el-button>
      </template>
      <!-- 设置对话框内容高度 -->
        <el-scrollbar>
          <pre v-highlight><code class="xml">{{xmlData}}</code></pre>
        </el-scrollbar>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>

import bpmnModeler from '@/components/Process/index'
import vkBeautify from 'vkbeautify'
import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {LoadDict} from "@/utils/dict";
import {ElMessage} from "element-plus";
import {fetchData, saveorUpadateDate} from "@/api";
import {useStore} from "vuex";
let xml=ref("")
let modeler=ref("")
let xmlOpen=ref(false)
let xmlTitle=ref("")
let xmlData=ref("")
let users=reactive([])
let groups=reactive([])
let categorys=reactive([])
let exps=reactive([])
let router=useRouter()
let route=useRoute()
let store = useStore()
let dicts = LoadDict(["sys_process_category"])
const pageDto = reactive({
  current: 1,
  size: 10
})
const getDataList = () => {
  fetchData("/process/flowable/definition/userList",pageDto).then((res:any) =>{
    res.records.forEach(val =>{
      val.userId = val.id.toString();
    })
    users = reactive(res.records);
    // let arr = {nickName: "流程发起人", userId: "${INITIATOR}"}
    // this.users.push(arr)
  });
  fetchData("/process/flowable/definition/roleList",pageDto).then((res:any) =>{
    res.records.forEach(val =>{
      val.roleId = val.id.toString();
    })
    groups = reactive(res.records);
  });
  // expList().then(res =>{
  //   this.exps = res.data;
  // });
}
onMounted(()=>{
  const deployId = route.query && route.query.deployId;
  //  查询流程xml
  if (deployId) {
    getXmlData(deployId);
  }
  categorys = reactive(dicts.type["sys_process_category"]);
  getDataList()
  }
)
const save = (data:any) => {
  const params = {
    name: data.process.name,
    category: data.process.category,
    xml: data.xml
  }
  saveorUpadateDate("/process/flowable/definition/save",params).then(res => {
     ElMessage.success(res)
    //清除页面缓存，再跳转
    store.dispatch('tagsView/delRouterView', {
      "path":"/admin/flowable/definition",
    })
    router.push("/admin/flowable/definitions")

  })
}
const getXmlData = (deployId:any) => {
  fetchData("/process/flowable/definition/readXml/"+deployId).then((res:any) =>{
     xml.value = res
     modeler.value = res
  })
}
const showXML = (xml:any) => {
   xmlTitle.value = 'xml查看';
   xmlOpen.value = true;
   
   xmlData.value = vkBeautify.xml(xml);
}
const copyText=()=> {
  navigator.clipboard.writeText(xmlData.value)
      .then(() => {
      ElMessage.success('复制成功')
      })
      .catch(() => {
        ElMessage.error('复制失败')
      })
}



</script>
<style lang="scss" >
.content-box{
  line-height: 10px;
}
// 修改对话框高度
.showAll_dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  ::v-deep .el-dialog {
    margin: 0 auto !important;
    height: 80%;
    overflow: hidden;
    background-color: #ffffff;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
      // 下边设置字体，我的需求是黑底白字
      color: #ffffff;
      padding: 0 15px;
    }
  }
}
</style>
